<script setup>
    import { BaseEdge, getSmoothStepPath, useVueFlow } from '@vue-flow/core'
    import { computed, watch } from "vue";

    const props = defineProps({
        id: {
            type: String,
            required: true
        },
        sourceX: {
            type: Number,
            required: true
        },
        sourceY: {
            type: Number,
            required: true
        },
        targetX: {
            type: Number,
            required: true
        },
        targetY: {
            type: Number,
            required: true
        },
        sourcePosition: {
            type: String,
            required: true
        },
        targetPosition: {
            type: String,
            required: true
        },
        source: {
            type: String,
            required: true
        },
        target: {
            type: String,
            required: true
        },
        data: {
            type: Object,
            required: false
        },
        stroke: {
            type: String,
            required: false,
            default: '#2694ff' // 默认颜色
        }
    })

    const { findNode } = useVueFlow()

    const path = computed(() => getSmoothStepPath(props))

    const markerId = computed(() => `${props.id}-marker`)
    watch(
        () => props,
        () => {

            console.log(props);

        },
        {
            deep: true
        }
    )
</script>

<script>
    export default {
        inheritAttrs: false
    }
</script>

<template>
    <BaseEdge
        :id="id"
        :path="path[0]"
        :marker-end="`url(#${markerId})`"
        :label-x="path[1]"
        :label-y="path[2]"
        label-bg-style="fill: whitesmoke"
        :style="{ stroke: stroke }"
    />
    dasdadsad
</template>
